<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="utf-8"/>

        <title>Simple URDF Loading Example</title>

        <style>
            html, body {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
        </style>
    <script  type="application/javascript" src="jquery-3.7.1.min.js"></script>
    <script type="importmap">
      {
        "imports": {
          "three": "../build/three.module.js",
          "three/addons/": "./jsm/"
        }
      }
    </script>
    <script>
      var scene, camera, renderer,  controls;
      var robot;
      var cachePanels = [];
      var Panels = [];
      var ws = null;
    </script>
    <script type="module">
      import {
        WebGLRenderer,
        PerspectiveCamera,
        Scene,
        Mesh,
        PlaneGeometry,
        ShadowMaterial,
        DirectionalLight,
        PCFSoftShadowMap,
        sRGBEncoding,
        Color,
        AmbientLight,
        Box3,
        LoadingManager,
        MathUtils,
      } from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import URDFLoader from 'three/addons/loaders/URDFLoader.js';  
      
      setTimeout(function(){
		  console.debug(111);
		  init();
		  render();
      
      },1000);

      function init() {

        scene = new Scene();
        scene.background = new Color(0x263238);

        camera = new PerspectiveCamera();
        camera.position.set(10, 10, 10);
        camera.lookAt(0, 0, 0);

        renderer = new WebGLRenderer({ antialias: true });
        renderer.outputEncoding = sRGBEncoding;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = PCFSoftShadowMap;
        document.body.appendChild(renderer.domElement);

        const directionalLight = new DirectionalLight(0xffffff, 1.0);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.setScalar(1024);
        directionalLight.position.set(5, 30, 5);
        scene.add(directionalLight);

        const ambientLight = new AmbientLight(0xffffff, 0.2);
        scene.add(ambientLight);

        //const ground = new Mesh(new PlaneGeometry(), new ShadowMaterial({ opacity: 0.25 }));
        //ground.rotation.x = -Math.PI / 2;
        //ground.scale.setScalar(30);
        //ground.receiveShadow = true;
        //scene.add(ground);

        controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 4;
        controls.target.y = 1;
        controls.update();

        // Load robot
        const manager = new LoadingManager();
        const loader = new URDFLoader(manager);
        //loader.load('models/urdf/T12/urdf/T12_flipped.URDF', result => {
        loader.load('models/T7/urdf/T7.c.urdf', result => {
          robot = result;
        });

        // wait until all the geometry has loaded to add the model to the scene
        manager.onLoad = () => {
          robot.rotation.x = Math.PI / 2;
          robot.rotation.x *= (-1);
          
          
          robot.updateMatrixWorld(true);

          //const bb = new Box3();
          //bb.setFromObject(robot);

          //robot.position.y -= bb.min.y;
          scene.add(robot);
		  
		  

        };

        onResize();
        window.addEventListener('resize', onResize);
        

      }

      function onResize() {

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

      }

      function render() {

        requestAnimationFrame(render);
        renderer.render(scene, camera);

      }

    </script>
    <script >
      var ws = new WebSocket("ws://42.193.99.214:1881/ws/OP20");
      ws.onmessage = function(e) {

		var obj = JSON.parse(e.data);
		robot.joints.j1.position.x = obj[0] - 1.03;
		robot.joints.j2.rotation.z = obj[1] + 3.1415926;
		robot.joints.j3.position.z = obj[2] + 0.2;
		robot.joints.j4.rotation.z = obj[3];
		robot.joints.j5.rotation.z = obj[4];
		robot.joints.j6.rotation.z = obj[5];
		robot.joints.j7.position.x = obj[6];
		
      };
	  
      var ws2 = new WebSocket("ws://42.193.99.214:1881/ws/OP10");
      ws2.onmessage = function(e) {

		var obj = JSON.parse(e.data);
		robot.joints.jj6.rotation.z = obj[0];
		
      };
	  
	  
    </script>
    </head>
    <body >

    </body>
</html>
